<script setup lang="ts">

import type {Ref} from "vue-demi";
import type {ActiveDetailVo} from "@/apis/active";

const visible = defineModel("visible", {
  type: Boolean,
  default: false
})

const befURl = import.meta.env.VITE_API_BASE_URL;

const vo:Ref<ActiveDetailVo> = defineModel("vo", {
  type: Object,
  default: {
    id: 0,
    activeTitle: '',
    activeBegin: '',
    activeEnd: '',
    bannerList: [],
    activeAddr: '',
    activeLabel: '',
    activePrice: 0,
    activeInstance: [],
    activeTrip: '',
    guests: [],
    activeRegisterDeadline: '',
    activeTargetGroup: '',
    activeLimit: 0,
    activeRegisteredNum: 0,
    activeForm: []
  }
})

const valueData = defineModel("valueData", {
  type: Array<any>,
  default: []
})

const fromHead = defineModel("fromHead", {
  type: Array<any>,
  default: [
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '电话',
      dataIndex: 'phone'
    }
  ]
})

// 模拟统计数据
const trendData = ref({
  data: [120, 200, 150, 80, 70, 110, 130]
})

const genderData = ref({
  data: [
    { value: 335, name: '男性' },
    { value: 310, name: '女性' }
  ]
})

const ageData = ref({
  data: [
    { value: 20, name: '18-25岁' },
    { value: 34, name: '26-30岁' },
    { value: 45, name: '31-40岁' }
  ]
})

// 图表配置项
const trendOptions = {
  color: '#42b983',
  xAxis: {
    type: 'category',
    data: ['周一','周二','周三','周四','周五','周六','周日']
  },
  yAxis: { type: 'value' },
  series: [{
    data: trendData.value.data,
    type: 'line',
    smooth: true
  }]
}

const genderOptions = {
  color: ['#42b983', '#99d9b9'],
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    radius: '50%',
    data: genderData.value.data,
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}

const ageOptions = {
  color: '#42b983',
  xAxis: {
    type: 'category',
    data: ageData.value.data.map(item => item.name)
  },
  yAxis: { type: 'value' },
  series: [{
    data: ageData.value.data.map(item => item.value),
    type: 'bar'
  }]
}

const query = ref({
  pageSize: 500,
  sizeOptions: [10, 20, 100, 200]
})

</script>

<template>
  <a-modal v-model:visible="visible" title="活动信息" hide-cancel hide-title fullscreen>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" title="活动信息">
        <a-space direction="vertical" fill class="tags-container">
          <a-card title="活动海报">
            <a-carousel v-if="vo.bannerList.length" arrow-class="arrow" class="carousel_box">
              <a-carousel-item v-for="(item, index) in vo.bannerList" :key="index">
                <a-image
                    :src="befURl + item.clientUrl"
                    fit="cover"
                    width="100%"
                    height="500"
                    alt="活动海报"
                />

              </a-carousel-item>
            </a-carousel>
            <a-empty v-else />
          </a-card>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-descriptions :title="vo.activeTitle" :column="1" bordered>
                <a-descriptions-item label="活动时间">
                  {{ vo.activeBegin }} 至 {{ vo.activeEnd }}
                </a-descriptions-item>
                <a-descriptions-item label="报名截止">
                  {{ vo.activeRegisterDeadline }}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :span="12">
              <a-card title="基本信息" :bordered="false">
                <a-space direction="vertical">
                  <div class="tags">
                    <a-tag v-for="i in vo.activeLabel.split(',')">
                      {{ i }}
                    </a-tag>
                  </div>
                  <div>活动地点：{{ vo.activeAddr }}</div>
                  <div>参与费用：¥{{ vo.activePrice }}</div>
                  <div>人数限制：{{ vo.activeLimit }}人（已报名{{ vo.activeRegisteredNum }}人）</div>
                </a-space>
              </a-card>
            </a-col>
          </a-row>

          <a-card title="行程安排">
            <a-timeline>
              <a-timeline-item v-for="(item, index) in JSON.parse(vo.activeTrip)" :key="index">
                {{ item.time }} {{ item.content }}
              </a-timeline-item>
              <a-empty v-if="!JSON.parse(vo.activeTrip).length" />
            </a-timeline>
          </a-card>

          <a-card title="活动实例" class="instance-container">
            <a-carousel v-if="vo.activeInstance.length" arrow-class="arrow" class="carousel_box" :auto-play="true">
              <a-carousel-item v-for="(item, index) in vo.activeInstance" :key="index">
                <a-image
                    v-if="item.fileType === 'png'"
                    :src="befURl + item.clientUrl"
                    width="100%"
                    height="500"
                    fit="cover"
                    :preview-visible="false"
                    :preview-props="{ trigger: 'click' }"
                    class="media-item"
                />
                <video
                    v-else-if="item.fileType === 'm4v' || item.fileType === 'mp4' || item.fileType === 'mov' || item.fileType === 'wmv' "
                    :src="befURl + item.clientUrl"
                    width="100%"
                    height="500"
                    class="media-item"
                    controls

                />
              </a-carousel-item>
            </a-carousel>
            <a-empty v-else />
          </a-card>

          <a-card title="特邀嘉宾">
            <a-list>
              <a-list-item v-for="guest in vo.guests" >
                <a-list-item-meta
                  :title="guest.name"
                >
                  <template #avatar>
                    <a-avatar shape="square">
                      <a-image
                          :src="befURl + guest.avatar"
                      />
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
              <a-empty v-if="!vo.guests.length" />
            </a-list>
          </a-card>
        </a-space>
      </a-tab-pane>

      <a-tab-pane key="2" title="活动报名信息">

        <a-space size="large">
          <a-statistic title="限制人数" :value="vo.activeLimit" show-group-separator />
          <a-statistic extra="已报名人数" :value="vo.activeRegisteredNum"  animation>
            <template #prefix>
              <icon-arrow-rise />
            </template>
          </a-statistic>
        </a-space>

        <a-card title="报名信息列表" :bordered="false" class="instance-container">
          <a-table
            :columns="fromHead"
            :data="valueData"
            :size="query.pageSize"
            :pagination="{
              showPageSize: true,
              showTotal: true,
              sizeOptions: query.sizeOptions
            }"

          >
            <template #empty>
              <a-empty description="暂无报名信息" />
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>

    </a-tabs>
  </a-modal>
</template>

<style scoped lang="scss">
.tags {
  display: flex;
}

.carousel_box {
  height: 500px;
}
.banner-image {
  width: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 8px;
}

.tags-container {
  flex-wrap: wrap;
  gap: 8px;
}

.arco-tag {
  margin: 2px;
}

.media-item {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.instance-container {
  margin-top: 16px;
}
</style>